<template>
  <div ref="dom" style="width: 100%; height: 100%;">
  </div>
</template>

<script>
  export default {
    name: "PieChart",
    props: ['data', 'cfg'],
    data() {
      return {
        chart: null,
        timer: null,
        currentIndex: -1,
        isPause: false
      }
    },
    watch: {
      data: {
        handler: function (n, o) {
          if (Object.keys(n).length > 0) this.loadChart();
        }
      }
    },
    mounted() {
      this.loadChart();
    },
    beforeDestroy() {
      this.destoryChart();
      this.clearTimer();
    },
    methods: {
      loadChart() {
        const data = this.data, cfg = this.cfg, echarts = this.$echarts;
        const isSmallScreen = window.screen.width < 1600;
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} {b}：{c}台 ({d}%)"
          },
          legend: {
            orient: 'vertical',
            top: 'center',
            right: 0,
            icon: 'circle',
            itemWidth: 8,
            itemHeight: 6,
            borderColor: '#000',
            itemGap: 5,
            textStyle: {
              color: '#999',
              fontSize: 12,
              fontWeight: isSmallScreen ? 100 : 600,
              rich: {
                oneone: {
                  width: 55,
                },
                twotwo: {
                  width: 25,
                  align: 'right'
                }
              },
            },
            selectedMode: false,
            formatter: function (name) {
              let total = 0;
              let tarValue;
              for (let i = 0; i < data.length; i++) {
                total += data[i].value;
                if (data[i].name === name) {
                  tarValue = data[i].value
                }
              }
              let v = tarValue + '台';
              return `{oneone|${name}} {twotwo|${v}}`
            }
          },
          series: [
            {
              name: '',
              center: ['28%', '50%'],
              color: cfg['color'] || [],
              type: 'pie',
              radius: '75%',
              data: data,
              label: {
                show: false,
                position: 'inside',
                // formatter: `{b}:{c}\n{d}%`,
                formatter: `{d}%`,
                lineHeight: 14,
                color: "#ddd", //颜色
                fontSize: 10 //字体大小
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        this.chart = echarts.getInstanceByDom(this.$refs.dom);

        if (this.chart) {
          // chart.clear();
          // chart && chart.dispose();
        } else {
          this.chart = echarts.init(this.$refs.dom, 'macarons');
        }

        this.chart.setOption(option, true);

        window.onresize = this.chart.resize;
      },
      destoryChart() {
        this.chart && this.chart.clear();
        this.chart && this.chart.dispose();
        this.chart = null;
      },
      clearTimer() {
        this.timer && clearInterval(this.timer);
        this.timer = null;
      }
    }
  }
</script>

<style scoped>

</style>
